<template>
  <div class="josn-input">
    <el-tabs v-model="sel" type="border-card">
      <el-tab-pane label="Headers" name="Headers">
        <HkTable
          :table-data="headerList"
          :table-columns="qualtableLabel"
          :operate="true"
          :is-need-index="true"
        >
          <template #key="scope">
            <el-input v-model="scope.row.row.key" />
          </template>
          <template #value="scope">
            <el-input v-model="scope.row.row.value" />
          </template>
          <template #operate="scope">
            <el-button type="text" @click="addList(scope)">添加</el-button>
            <el-button
              v-show="headerList.length > 1"
              type="text"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </HkTable>
      </el-tab-pane>
      <el-tab-pane label="Body" name="Body">
        <el-radio-group v-model="bodyObject.mode">
          <el-radio :label="0">none</el-radio>
          <el-radio :label="1">form-data</el-radio>
          <el-radio :label="2">x-www-form-urlencoded</el-radio>
          <el-radio :label="3">
            请选择
            <el-select
              v-if="bodyObject.mode == 3"
              v-model="bodyObject.rawType"
              clearable
            >
              <el-option label="JSON" :value="0">JSON</el-option>
              <el-option label="TEXT" :value="1">TEXT</el-option>
            </el-select>
          </el-radio>
        </el-radio-group>
        <div
          v-if="bodyObject.mode == 0"
          style="margin: 10px auto; text-align: center"
        >
          This request does not have a body
        </div>
        <HkTable
          v-else-if="bodyObject.mode == 1 || bodyObject.mode == 2"
          :table-data="bodyObject.kvList"
          :table-columns="qualtableLabel"
          :operate="true"
          :is-need-index="true"
        >
          <template #key="scope">
            <el-input v-model="scope.row.row.key" />
          </template>
          <template #value="scope">
            <el-input v-model="scope.row.row.value" />
          </template>
          <template #operate="scope">
            <el-button type="text" @click="addList(scope)">添加</el-button>
            <el-button
              v-show="bodyObject.kvList.length > 1"
              type="text"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </HkTable>
        <el-input
          v-if="bodyObject.mode == 3"
          v-model="bodyObject.rawValue"
          type="textarea"
          style="margin-top: 20px"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import HkTable from '../Hk-Table/index.vue'
export default {
  components: { HkTable },
  props: {
    header: {
      type: Array,
      default: () => []
    },
    body: {
      type: Object,
      default: () => {
        undefined
        undefined
        0
      }
    }
  },
  data() {
    return {
      // 选中项
      sel: 'Headers',
      // 表格呈现数据
      qualtableLabel: [
        { label: 'key', param: 'key', type: 'slot' },
        { label: 'value', param: 'value', type: 'slot' }
      ],
      headerList: this.header,
      bodyObject: this.body,
      //   暂存的选择项
      mode: '',
      //   暂存的数据列表
      kvList: ''
    }
  },
  watch: {
    'bodyObject.mode': {
      handler() {
        if (this.body) {
          if (this.mode) {
            if (this.bodyObject.mode !== this.mode) {
              this.bodyObject.kvList = [
                {
                  value: '',
                  label: ''
                }
              ]
            } else {
              this.bodyObject.kvList = this.kvList
            }
          }
        }
      },
      deep: true
    }
    // headerList: {
    //   handler() {
    //    this.$emit('changeValue',this.headerList,this.bodyObject)
    //   },
    //   deep: true,
    // },
    // bodyObject: {
    //   handler() {
    //    this.$emit('changeValue',this.headerList,this.bodyObject)
    //   },
    //   deep: true,
    // },
  },
  mounted() {
    if (this.body) {
      this.mode = this.body.mode
      this.kvList = this.body.kvList
    }
    this.changeType()
  },
  methods: {
    // 添加操作
    addList(a) {
      if (this.sel === 'Headers') {
        this.headerList.push({
          value: '',
          label: ''
        })
      } else {
        this.bodyObject.kvList.push({
          value: '',
          label: ''
        })
      }
    },
    /** 删除按钮操作 */
    handleDelete(data) {
      if (this.sel === 'Headers') {
        this.headerList.splice(data.index, 1)
      } else {
        this.bodyObject.kvList.splice(data.index, 1)
      }
    },
    changeType() {
      if (this.header) {
        if (this.header == false) {
          this.headerList = [
            {
              value: '',
              key: ''
            }
          ]
        } else {
          this.headerList = this.header
        }
      }
      if (this.body) {
        if (this.body.kvList === undefined) {
          this.bodyObject.kvList = [
            {
              value: '',
              key: ''
            }
          ]
        } else {
          this.bodyObject.kvList = this.body.kvList
        }
      }
    },
    // 值变化
    changeValue() {
      this.$emit('changeValue', this.headerList, this.bodyObject)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-tab-pane {
    max-height: 250px;
    overflow: auto;
    padding: 0 10px;
  }
  .el-tabs--border-card {
    border-left: none;
    border-right: none;
  }
  .el-select {
    width: 100px;
    .el-input__inner {
      border: none !important;
    }
  }
  .el-tabs--border-card > .el-tabs__content {
    padding: 0;
  }
}
</style>
<style lang="scss">
